<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link th:href="@{/ajax/libs/cropbox/cropbox.css}" rel="stylesheet"/>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
	<form class="form-horizontal m" id="form-news-add" th:object="${news}">
		<input name="userId"  type="hidden"  th:field="*{newsId}" />
		<div class="form-group">
			<label class="col-sm-3 control-label">新闻标题：</label>
			<div class="col-sm-8">
				<input id="newsTitle" name="newsTitle" class="form-control" type="text" th:field="*{newsTitle}">
			</div>
		</div>
		<div class="form-group">
			<label class="col-sm-3 control-label">新闻内容：</label>
			<div class="col-sm-8" >
				<textarea type="text" style="height: 280px" name="newsContent" class="form-control" th:field="*{newsContent}"></textarea>
			</div>
		</div>
	</form>

	<div class="form-group">
		<label class="col-sm-3 control-label">图片上传：</label>
		<div class="col-sm-8">
			<div class="imageBox">
				<div class="thumbBox"></div>
				<div class="spinner" style="display: none">Loading...</div>
			</div>
			<div class="action">
				<div class="new-contentarea tc">
					<a href="javascript:void(0)" class="upload-img"> <label for="upImage">上传图像</label> </a>
					<input type="file" class="" name="upImage" id="upImage" accept="image/*"/>
				</div>
				<input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切" />
				<input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+" />
				<input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-" />
			</div>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-3" id="cropped"></div>
	</div>


</div>
<div th:include="include::footer"></div>
<script th:src="@{/ajax/libs/cropbox/cropbox.js}"></script>
<script type="text/javascript">
	var cropper;
	var prefix = ctx + "system/news";
	var image = '[[${news.imagePath}]]';
	var options = {
		width:300,
		height:140,
		aspectRatio: 16 / 9,
		thumbBox: '.thumbBox',
		spinner: '.spinner',
		imgSrc: $.common.isEmpty(image) ? ctx + 'img/uploadImage.jpg' : ctx + 'profile/upload/' + image
	}
	cropper = $('.imageBox').cropbox(options);
	$('#upImage').on('change', function() {
		var reader = new FileReader();
		reader.onload = function(e) {
			options.imgSrc = e.target.result;
			//根据MIME判断上传的文件是不是图片类型
			if((options.imgSrc).indexOf("image/")==-1){
				$.modal.alertWarning("文件格式错误，请上传图片类型,如：JPG,JPEG，PNG后缀的文件。");
			} else {
				cropper = $('.imageBox').cropbox(options);
			}
		};
		reader.readAsDataURL(this.files[0]);
	});

	$("#form-news-add").validate({
		rules:{
			xxxx:{
				required:true,
			},
		},
		focusCleanup: true
	});


	$('#btnCrop').on('click', function(){
		var img = cropper.getDataURL();
		$('#cropped').html('');
		$('#cropped').append('<img src="'+img+'" align="absmiddle" style="height: 180px; width:240px;margin-top:4px;box-shadow:0px 0px 12px #7E7E7E;"><p>180px*180px</p>');
	});

	$('#btnZoomIn').on('click', function(){
		cropper.zoomIn();
	});

	$('#btnZoomOut').on('click', function(){
		cropper.zoomOut();
	});

	function submitHandler() {
		if ($.validate.form()) {
			var img = cropper.getBlob();
			var data=$("#form-news-add").serializeArray();
			var formdata = new FormData();
			formdata.append("newsId",data[0].value);
			formdata.append("newsTitle",data[1].value);
			formdata.append("newsContent",data[2].value);
			formdata.append("image", img);
			$.ajax({
				url: ctx + "system/news/edit",
				data: formdata,
				type: "post",
				processData: false,
				contentType: false,
				success: function(result) {
					$.operate.successCallback(result);
				}
			})
		}
	}

</script>
</body>
</html>
